<template>
    <div class="fillcontain">
        <head-top>
        </head-top>

        <el-row style="margin-top: 20px;">
            <el-form ref="form" :model="form" label-width="100px">
                <el-col :span="5" :offset="1">
                    <el-form-item label="用户姓名:">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-button type="primary" @click="getDeal">查询</el-button>
                    <el-button type="primary" @click="handleAdd">添加单次任务</el-button>
                    <el-button type="primary" @click="handleAddWeek">添加每周任务</el-button>
                    <el-button type="primary" @click="handleAddMonth">添加每月任务</el-button>
                </el-col>
            </el-form>
        </el-row>


        <div class="table_container">

            <el-table
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%">
                <el-table-column
                        property="id"
                        label="id"
                        width="100">
                </el-table-column>
                <el-table-column
                        property="name"
                        label="用户姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        width="220"
                        property="msg"
                        label="提醒内容">
                </el-table-column>
                <el-table-column
                        width="120"
                        property="msgFlag"
                        label="提醒周期">
                    <template slot-scope="scope">
                        {{getChangeType(scope.row.msgFlag)}}
                    </template>
                </el-table-column>
                <el-table-column
                        property="msgDate"
                        :formatter="dateFormat2"
                        label="单次提醒日期">
                </el-table-column>
                <el-table-column
                        property="weekDays"
                        label="星期">
                    <template slot-scope="scope">
                        {{getChangeType2(scope.row.weekDays)}}
                    </template>
                </el-table-column>
                <el-table-column
                        property="monthDays"
                        label="每月日期">
                </el-table-column>
                <el-table-column
                        property="ning"
                        label="提醒时间">
                </el-table-column>
                <el-table-column
                        :formatter="dateFormat"
                        property="creatTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                        style="margin-top:15px;"
                        background
                        layout="prev, pager, next"
                        :current-page.sync="pagination.current"
                        :page-size.sync="pagination.size"
                        :total="pagination.count"
                        @current-change="handleCurrentChange">
                </el-pagination>
            </div>

            <el-dialog title="添加单次提醒任务" v-model="dialogFormVisibleAdd">
                <el-form :model="add">
                    <el-form-item label="用户姓名" label-width="100px">
                        <el-select v-model="add.userId" placeholder="请选择">
                            <el-option
                                    v-for="item in Useroptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">提醒日期</label>
                        <el-date-picker label-width="100px"
                                        v-model="add.msgDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">提醒时间</label>
                        <el-radio v-model="add.ning" label="早间提醒">早间提醒</el-radio>
                        <el-radio v-model="add.ning" label="晚间提醒">晚间提醒</el-radio>
                    </div>
                    <el-form-item label="提醒事项" label-width="100px">
                        <el-input v-model="add.msg" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
                    <el-button type="primary" @click="saveAdd(1)">确 定</el-button>
                </div>
            </el-dialog>


            <el-dialog title="修改提醒任务" v-model="dialogFormVisibleUpdate">
                <el-form :model="update">
                    <el-form-item label="提醒事项" label-width="100px" hidden>
                        <el-input v-model="update.id" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户姓名" label-width="100px">
                        <el-select v-model="update.userId" placeholder="请选择">
                            <el-option
                                    v-for="item in Useroptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :disabled="true"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">提醒日期</label>
                        <el-date-picker label-width="100px"
                                        v-model="update.msgDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">提醒时间</label>
                        <el-radio v-model="add.ning" label="1">早间提醒</el-radio>
                        <el-radio v-model="add.ning" label="2">晚间提醒</el-radio>
                    </div>
                    <el-form-item label="提醒事项" label-width="100px">
                        <el-input v-model="update.msg" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
                    <el-button type="primary" @click="updateUser">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="添加每月任务" v-model="dialogFormVisibleAddMonth">
                <el-form :model="add">
                    <el-form-item label="用户姓名" label-width="100px">
                        <el-select v-model="add.userId" placeholder="请选择">
                            <el-option
                                    v-for="item in Useroptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">每月提醒日</label>
                        <el-input-number v-model="add.monthDays" :min="1" :max="31" label="提醒日期"></el-input-number>
                    </div>
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">提醒时间</label>
                        <el-radio v-model="add.ning" label="早间提醒">早间提醒</el-radio>
                        <el-radio v-model="add.ning" label="晚间提醒">晚间提醒</el-radio>
                    </div>
                    <el-form-item label="提醒事项" label-width="100px">
                        <el-input v-model="add.msg" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleAddMonth = false">取 消</el-button>
                    <el-button type="primary" @click="saveAdd(2)">确 定</el-button>
                </div>
            </el-dialog>


            <el-dialog title="添加每周任务" v-model="dialogFormVisibleAddWeek">
                <el-form :model="add">
                    <el-form-item label="用户姓名" label-width="100px">
                        <el-select v-model="add.userId" placeholder="请选择">
                            <el-option
                                    v-for="item in Useroptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">每周提醒日</label>
                        <el-input-number v-model="add.weekDays" :min="1" :max="7" label="提醒日期"></el-input-number>
                    </div>
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">提醒时间</label>
                        <el-radio v-model="add.ning" label="早间提醒">早间提醒</el-radio>
                        <el-radio v-model="add.ning" label="晚间提醒">晚间提醒</el-radio>
                    </div>
                    <el-form-item label="提醒事项" label-width="100px">
                        <el-input v-model="add.msg" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleAddWeek = false">取 消</el-button>
                    <el-button type="primary" @click="saveAdd(3)">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
	import headTop from '../components/headTop'
	import {getUserList, getUserCount} from '@/api/getData'

	export default {
		data() {
			return {
				tableData: [{
					registe_time: '2016-05-02',
					username: '王小虎',
					city: '上海市普陀区金沙江路 1518 弄'
				}],
				dialogFormVisibleAdd: false,
				dialogFormVisibleUpdate: false,
				dialogFormVisibleAddMonth: false,
				dialogFormVisibleAddWeek: false,
				pagination: {
					current: 1,
					size: 3,
					count: 0,
					orderby: ''  //升降序
				},
				dialogFormVisible: false,
				form: {
					name: ''
				},
				add: {
					ning: '',
					userId: '',
					weekDays: '',
					monthDays: '',
					msg: '',
					msgDate: ''
				},
				addMonth: {
					userId: '',
					msg: '',
					msgMonthday: ''
				},
				addWeek: {
					userId: '',
					msg: '',
					msgMonthday: ''
				},
				update: {
					id: '',
					userId: '',
					msg: '',
					msgDate: ''
				},
				Useroptions: '',
				options: [{
					value: '1',
					label: '单次提醒'
				}, {
					value: '2',
					label: '每月提醒'
				}, {
					value: '3',
					label: '每周提醒'
				}],
				options2: [{
					value: '1',
					label: '星期一'
				}, {
					value: '2',
					label: '星期二'
				}, {
					value: '3',
					label: '星期三'
				}, {
					value: '4',
					label: '星期四'
				}, {
					value: '5',
					label: '星期五'
				}, {
					value: '6',
					label: '星期六'
				}, {
					value: '7',
					label: '星期天'
				}],

			}
		},

		components: {
			headTop,
		},
		created() {
			this.initData();
		},
		methods: {
			async initData() {
				try {
					this.getDeal(this.pagination.current);
					this.getAllUser();
				} catch (err) {
					console.log('获取数据失败', err);
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.pagination.current = val;

				this.getDeal(this.pagination.current)
			},
			async getDeal(current) {
				this.$axios({
					url: "http://127.0.0.1:9522/deal/get/" + this.pagination.current + "/10",
					method: "get",
					params: {
						name: this.form.name,
					}
				}).then(res => {
					this.tableData = res.data.records;
					// 当前页
					this.pagination.current = res.data.current;
					this.pagination.size = res.data.size
					this.pagination.count = res.data.total
				})
			},
			async getAllUser() {
				this.$axios({
					url: "http://127.0.0.1:9522/phone/getall",
					method: "get",
				}).then(res => {
					this.Useroptions = res.data;
				})
			},
			handleEdit(index, row) {
				this.getSelectItemData(row, 'edit')
				this.dialogFormVisibleUpdate = true;
			},
			getSelectItemData(row, type) {

				this.update.msg = row.msg;
				this.update.id = row.id;
				this.update.msgDate = row.msgDate;
				this.update.userId = row.userId;

			},
			handleAdd() {
				this.dialogFormVisibleAdd = true;
			},
			handleAddWeek() {
				this.dialogFormVisibleAddWeek = true;
			},
			handleAddMonth() {
				this.dialogFormVisibleAddMonth = true;
			},
			async saveAdd(msgFlag) {
				console.log(this.add);
				if (this.add.userId != '' && this.add.msg != '' && this.add.ning != '') {
					this.$axios({
						url: "http://127.0.0.1:9522/deal/add/",
						method: "post",
						params: {
							msgFlag: msgFlag,
							userId: this.add.userId,
							msg: this.add.msg,
							ning: this.add.ning,
							monthDays: this.add.monthDays,
							weekDays: this.add.weekDays,
							msgDate: this.add.msgDate == '' ? '' : this.$moment(this.add.msgDate).format("YYYY-MM-DD"),

						}
					}).then(res => {
						this.$notify({
							title: '成功',
							message: res.data,
							type: 'success',
							duration: 1500
						});
						this.dialogFormVisibleAdd = false;
						this.dialogFormVisibleAddMonth = false,
                        this.dialogFormVisibleAddWeek = false,
						this.add.userId = '';
						this.add.msg = '';
						this.add.msgDate = '';
						this.add.ning = '';
						this.add.monthDays = '';
						this.add.weekDays = '';
						this.getDeal();

					})
				} else {
					this.$notify({
						title: '警告',
						message: '请补充完用户全部信息后提交',
						type: 'warning',
						duration: 1500
					});
				}
			},
			dateFormat: function (row, column) {
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.$moment(date).format("YYYY-MM-DD");
			},
			dateFormat2: function (row, column) {
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.$moment(date).format("YYYY-MM-DD");
			},
			getChangeType(e) {
				for (var i = 0; i < this.options.length; i++) {
					if (this.options[i].value == e) {
						return this.options[i].label;
					}
				}
			},
			getChangeType2(e) {
				for (var i = 0; i < this.options2.length; i++) {
					if (this.options2[i].value == e) {
						return this.options2[i].label;
					}
				}
			},
			async handleDelete(index, row) {
				this.$axios({
					url: "http://127.0.0.1:9522/deal/delete/" + row.id,
					method: "delete",
				}).then(res => {
					this.$notify({
						title: '成功',
						message: '删除成功',
						type: 'success',
						duration: 1500
					});
					this.getDeal();
				})
			},
			async updateUser() {
				if (this.update.id != '' && this.update.msg != '' && this.update.msgDate != '') {
					this.$axios({
						url: "http://127.0.0.1:9522/deal/update/",
						method: "post",
						params: {
							id: this.update.id,
							msg: this.update.msg,
							msgDate: this.$moment(this.update.msgDate).format("YYYY-MM-DD"),
						}
					}).then(res => {
						this.$notify({
							title: '成功',
							message: res.data,
							type: 'success',
							duration: 1500
						});
						this.dialogFormVisibleUpdate = false;
						this.getDeal();
					})
				} else {
					this.$notify({
						title: '警告',
						message: '请补充完用户全部信息后提交',
						type: 'warning',
						duration: 1500
					});
				}
			},
		},
	}
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
